<template>
	<view class="account_page">
		<view class="topbar" :style="{'height':topHeight+'px'}"></view>
		<view class="nav_box">
			<u-icon class="icon" name="arrow-left" size="24" color="#FFFFFF" @click="back()"></u-icon>
			<view style="font-size: 32rpx;">{{type==1?'支付宝':'微信'}}账户绑定</view>
		</view>
		<block v-if="true">
			<view class="item" style="border-bottom: 2rpx #FAFAFA solid;">
				<view>真实姓名</view>
				<input placeholder="请输入身份证姓名" />
			</view>
<!-- 			<view class="item">
				<view>身份证号</view>
				<input placeholder="请输入身份证号" />
			</view> -->
			<view class="item" style="margin-top: 20rpx;">
				<view>手机号码</view>
				<input placeholder="请输入手机号码" />
			</view>
			<view class="item1">
				<view>验证码</view>
				<input placeholder="请输入验证码" />
				<view class="code_btn">获取验证码</view>
			</view>
			<view class="btn">绑定账号</view>
		</block>
		<!-- <block v-else>
			<view class="bd">
				<image src="../../../static/wallet/ali.png"></image>
				<view class="among">
					<view>XXX</view>
					<view>18888888888</view>
				</view>
				<view class="bd_btn" @click="toChange()">更换绑定</view>
			</view>
		</block> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHeight: 0,
				type: 1,
			}
		},
		onLoad(e) {
			this.type=e.type
			uni.getSystemInfo({
				success: (res) => {
					this.topHeight = res.statusBarHeight || 24
					console.log(res.statusBarHeight);
				},
			});
		},
		methods: {
			toChange(){
				uni.navigateTo({
					url:"/pages/wallet/account/changebd?type="+this.type
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.account_page {
		width: 100%;
		height: 100vh;
		background-color: #F9F9F9;
		.topbar {
			background-color: #00CC7B;
		}
		.nav_box {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			padding: 0rpx 32rpx;
			text-align: center;
			position: relative;
			background-color: #00CC7B;
			view {
				color: #FFFFFF;
				font-weight: bold;
			}
			.icon{
				position: absolute;
				top: 22rpx;
			}
		}
	    .item{
			width: 100%;
			height: 104rpx;
			padding: 32rpx;
			display: flex;
			background-color: #FFFFFF;
			view{
				width: 150rpx;
				height: 100%;
				font-size: 28rpx;
				color: #333333;
			}
			input{
				width: 80%;
			}
		}
		.item1{
			width: 100%;
			height: 104rpx;
			padding: 32rpx;
			display: flex;
			background-color: #FFFFFF;
			border-top: 2rpx #FAFAFA solid;
			view{
				width: 150rpx;
				height: 100%;
				font-size: 28rpx;
				color: #333333;
			}
			input{
				width: 60%;
			}
			.code_btn{
				width: 150rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				color: #FFFFFF;
				background-color: #00CC7B;
				border-radius: 110rpx;
				font-size: 24rpx;
				transform: translateY(-8rpx);
			}
		}
	    .btn{
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #00CC7B;
			margin: auto;
			border-radius: 76rpx;
			transform: translateY(196rpx);
		}
	    .bd{
			width: 100%;
			height: 112rpx;
			background-color: #FFFFFF;
			padding: 24rpx 32rpx;
			display: flex;
			justify-content: space-between;
			image{
				width: 64rpx;
				height: 64rpx;
			}
			.among{
				width: 60%;
				height: 100%;
				font-size: 28rpx;
				color: #333333;
			}
			.bd_btn{
				width: 144rpx;
				height: 52rpx;
				line-height: 42rpx;
				text-align: center;
				color: #00CC7B;
				border: 2rpx #00CC7B solid;
				border-radius: 110rpx;
				margin-top: 8rpx;
				font-size: 24rpx;
			}
		}
	}
</style>